<template>
  <div class="searchArea">
    <h1>课程信息列表</h1>
    <el-form :inline="true" class="teacherform" label-width="80px">
      <el-form-item label="课程名称">
        <el-input
          placeholder="请输入课程名称"
          size="small"
          v-model="courseInfo.title"
        ></el-input>
      </el-form-item>
      <el-form-item label="年份">
        <el-select v-model="courseInfo.year" placeholder="年份" size="small">
          <el-option
            v-for="(item, index) in courseYear"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :inline="true" class="teacherform" label-width="80px">
      <el-form-item label="课程类别">
        <el-select
          v-model="courseInfo.courseTypeId"
          placeholder="选择课程类别"
          size="small"
        >
          <el-option
            v-for="(item, index) in CourseType"
            :key="index"
            :label="item.courseTypeName"
            :value="item.courseTypeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学期">
        <el-select
          v-model="courseInfo.term"
          placeholder="选择学期"
          size="small"
        >
          <el-option
            v-for="(item, index) in term"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          style="margin-left:40px;
                  background-color: rgb(51, 55, 68);
                  color: white;
                  border: 0;"
          @click="submit"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      courseInfo: {
        title: null,
        courseTypeId: null,
        year: null,
        term: null,
      },
      CourseType: [],
      courseYear: [],
      term: ["上学期", "下学期"],
    };
  },
  methods: {
    submit() {
      this.checkSearchInfo();
      let options = this.courseInfo;
      this.$http
        .post(this.$api.CourseMonitorGetCourseListOfM, options)
        .then((resp) => {
          if (resp.success) {
            // 搜索组件传递参数
            this.$emit("searchSubmit", resp.data);
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },

    //检查参数
    checkSearchInfo() {
      this.courseInfo.title = "" ? null : this.courseInfo.title;
      this.courseInfo.courseTypeId = "" ? null : this.courseInfo.courseTypeId;
      this.courseInfo.year = "" ? null : this.courseInfo.year;
      this.courseInfo.term = "" ? null : this.courseInfo.term;
    },
    // 返回课程类型列表
    returnCourseType() {
      this.$http.get(this.$api.InfoCourseType).then((resp) => {
        if (resp.success) {
          this.CourseType = resp.data.courseType;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回课程年份
    returnCourseYear() {
      this.$http.get(this.$api.InfoYears).then((resp) => {
        if (resp.success) {
          this.courseYear = resp.data.years;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
  },
  mounted() {
    this.returnCourseType();
    this.returnCourseYear();
  },
};
</script>

<style scoped>
.el-input {
  width: 220px;
}
.el-select {
  width: 220px;
}

.teacherform {
  height: 50px;
  width: 800px;
  margin: auto;
  text-align: left;
  padding-left: 70px;
}

.searchArea {
  text-align: center;
}
</style>
